import React, { Component, Suspense, Fragment } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// import ColorSelect from './colorSelect'
import { ChromePicker } from 'react-color';
import { connect } from 'dva';
import moment from 'moment';
import dataTime from '../../../utils/dataTime';
import configimg from '../../../../public/configimg/index';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row,
  Col,
  Card,
  Icon,
  Tooltip,
  Form,
  Button,
  Input,
  Upload,
  message,
  Radio,
  Spin,
  notification,
} from 'antd';
import Editor from '@/utils/Editor';
import styles from './index.less';
import imgURL from '../../../assets/accessSettings/icon-a.png'; // http://www.chatbot.cn/qizhi-client-img/在线客服.png1
import LogoimgURL from '../../../assets/accessSettings/icon-头像.png';
import khmrimgURL from '../../../assets/accessSettings/icon-机器人.png';
import mrckSizea from '../../../assets/accessSettings/默认大窗口.png';
import mrckSizeb from '../../../assets/accessSettings/默认小窗口.png';
import imgycd from '../../../assets/accessSettings/浮动-a.png';
import imgycz from '../../../assets/accessSettings/浮动-c.png';
import imgyddycd from '../../../assets/accessSettings/h5-a.png';
import imgyddycx from '../../../assets/accessSettings/h5-c.png';
import imgyddycz from '../../../assets/accessSettings/he-b.png';

const mrckzxkf = '/robotConfigImg/kefu.png';
const mrckjqr = '/robotConfigImg/robot.png';
const mrckzxkfd = '/robotConfigImg/kefu-squ.png';
const mrckzxkfs = '/robotConfigImg/kefu-vertical.png';
const mrckkfzx = '/robotConfigImg/kefu-across.png';
import ljx from '../../../assets/icons/垃圾箱.png';
import { log } from 'lodash-decorators/utils';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1131883_fqf69hupewt.js', // 在 iconfont.cn 上生成
});
const { TextArea } = Input;
class SiteAccess2 extends Component {
  constructor() {
    super();
    this.state = {
      // 参数
      logoa: '/robotConfigImg/1.png',
      logob: '/robotConfigImg/2.png',
      logoc: '/robotConfigImg/3.png',
      entranceWebStyle: '', // 入口图标样式 电脑端
      entranceH5Style: '', // 入口图标样式 移动端
      ckbt: '',
      ckys: '',
      jqrkfName: '',
      isSimilar: '2',
      disp: {},
      disps: {},
      dispsa: {},
      // 参数结结束
      imageUrld: null,
      imageUrle: null,
      index: 100,
      indextwo: 100,
      color: '#11cbff ',
      colortwo: '#11cbff ',
      displayColorPicker: false,
      displayColorPickertwo: false,
      loading: false,
      loadingA: false,
      loadingB: false,
      aaa: false,
      bbb: '',
      valueA: '1',
      valueB: '1',
      valueC: '1',
      ckdxSize: '1',
      mrckdxweb: '1',
      mrckdxydd: '1',
      bottomStyle: 1,
      commonProblemList: [{ name: '', item: '' }],
      pdxs: true,
      content: '',
      zxkfList: [
        { name: mrckzxkf, icon: '' },
        { name: mrckjqr, icon: '' },
        { name: mrckzxkfd, icon: '' },
        { name: mrckzxkfs, icon: '' },
      ],
      ydkfList: [
        { name: mrckzxkf, icon: '' },
        { name: mrckjqr, icon: '' },
        { name: mrckzxkfd, icon: '' },
        { name: mrckzxkfs, icon: '' },
        { name: mrckkfzx, icon: '' },
      ],
      webWinColor: '#11cbff ',//窗口颜色
      loadingImage:false,
      imageSourceToWinLogo:null,//窗口logobase64
      winLogo:'',//窗口logo地址
      imageSourceToWebUserHeadImg:null,//客户默认头像base64
      webUserHeadImg:'',//客户默认头像地址
      sidebarMsg:'',//侧边栏信息展示
      id:null,
      contentId:null,
      headPath:null,
      headUrl:null
    };
  }

  componentDidMount() {
    //
    // this.suax()
    let sysTime = dataTime.formatDate(new Date().getTime()); // 初始时间
    this.setState({
      overTime: sysTime.replace(/\//g, '-'),
    });
    this.getInfo();
  }

  isBigEnough = (element, index, array) => {
    return element >= 10;
  };

  getInfo = () => {
    this.setState({ loading: true });
    const { dispatch,robotId,form } = this.props;
    dispatch({
      type: 'accessSettings/fetchd',
      payload: {robotId},
      callback: res => {
        if (!res.entranceH5Img){
          res.entranceH5Img = '/robotConfigImg/kefu-across.png'
        }
        if(!res.entranceWebImg){
          res.entranceWebImg = '/robotConfigImg/kefu.png'
        }
        const a = this.state.zxkfList;
        const b = this.state.ydkfList; // entranceH5Style
        const lista = [];
        const listb = [];

        let result = a.some(item => {
          return item.name === res.entranceWebImg;
        });

        if (!result) {
          a.push({ name: res.entranceWebImg, icon: '1' });
          this.setState({ disp: { display: 'none' } });
        }

        let results = b.some(item => {
          return item.name === res.entranceH5Img;
        });

        if (!results) {
          this.setState({
            disps: { display: 'none' },
            aaa: true,
            bbb: res.entranceH5Img,
            imageUrle: res.entranceH5Img,
            entranceH5Style: res.entranceH5Img,
          });
        } else {
          this.setState({ dispsa: { display: 'none' } });
          b.map((item, index) => {
            // item.icon = ''
            listb.push(item.name);
            if (res.entranceH5Img === item.name) {
              b[index].icon = '1';
              this.setState(() => ({
                ydkfList: b,
                imageUrle: null,
                entranceH5Style: b[index].name,
              }));
              if (index === 0) {
                this.setState(() => ({ indextwo: 100 }));
              } else {
                this.setState(() => ({ indextwo: index }));
              }
            }
          });
          // this.setState({ indextwo: null, imageUrle: null })
          if (!listb.includes(res.entranceH5Img)) {
            this.setState({ indextwo: null, imageUrle: res.entranceH5Img });
            this.yddjMapImg('0');
          }
        }

        a.map((item, index) => {
          // item.icon = ''
          lista.push(item.name);
          if (res.entranceWebImg === item.name) {
            a[index].icon = '1';
            this.setState(() => ({ zxkfList: a, entranceWebStyle: a[index].name }));
            if (index === 0) {
              this.setState(() => ({ index: 100 }));
            } else {
              this.setState(() => ({ index }));
            }
          }

          //  fangfa
        });

        //
        if (!lista.includes(res.entranceWebImg)) {
          this.setState({ index: null, imageUrld: res.entranceWebImg });
          this.djMapImg('0');
        }

        let rmwtpb = [];

        form.setFieldsValue({
          winTitle:res.winTitle,
          solveFlag:res.solveFlag + '',
          isSimilar:res.isSimilar,
          showFlag:res.showFlag + '',
          winSize:res.winSize + ''
        })
        this.setState({
          loading:false,
          webWinColor:res.winColor ? res.winColor : res.webWinColor,
          winLogo:res.winLogo ? res.winLogo : '/robotConfigImg/1.png',
          webUserHeadImg:res.userHeadImg ? res.userHeadImg : '/robotConfigImg/2.png',
          sidebarMsg:res.rightMessage ? res.rightMessage : '',
          valueC: res.entranceFlag ? String(res.entranceFlag) : '1',
          mrckdxweb: res.entranceWebSeat ? String(res.entranceWebSeat) : '1',
          mrckdxydd: res.entranceH5Seat ? String(res.entranceH5Seat) : '1',
          colortwo: res.iconBottomColor ? res.iconBottomColor : '#11cbff',
          bottomStyle: res.entranceH5Seat,
          id:res.id,
          contentId:res.contentId,
          headPath:res.headPath ? res.headPath : '/robotConfigImg/1.png',
          headUrl:res.headPath ? res.headPath : '/robotConfigImg/1.png',
        })
      }
    })
  }

  handleChangeComplete = color => {
    this.setState({ color: color.hex });
  };

  // ----------- 窗口颜色-----------------------
  handleClick = () => {
    this.setState({ displayColorPicker: !this.state.displayColorPicker });
  };

  handleClose = () => {
    this.setState({ displayColorPicker: false });
  };

  // ----------- 入口图标位置底部窗口颜色-----------------------
  handleClicktwo = () => {
    this.setState({ displayColorPickertwo: !this.state.displayColorPickertwo });
  };

  handleClosetwo = () => {
    this.setState({ displayColorPickertwo: false });
  };
  handleChangeCompletetwo = color => {
    this.setState({ colortwo: color.hex });
  };

  // ----------------客户默认头像----------
  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };

  // beforeUpload = (file) => {
  //
  //   const isJPG = file.type;
  //   const isLt2M = file.size / 1024 / 1024 < 1;
  //   if (!isLt2M) {
  //     message.error('Image must smaller than 2MB!');
  //   }
  //   return isJPG && isLt2M;
  // }

  beforeUpload = file => {
    let b = /\.(png|jpg|gif)$/;
    let a = file.name.toLowerCase();

    const pig = b.test(a);
    const isJPG = file.type;
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!pig) {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      } else {
        message.error('请上传图片格式');
      }
    } else {
      if (!isLt2M) {
        message.error('请上传小于2M的图片');
      }
    }
    return isJPG && isLt2M && pig;
  };

  handleChangeA = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrla =>
        this.setState({
          imageUrla,
          loading: false,
          logob: info.file.response.url,
        })
      );
    }
  };

  // ------------- 解决状态--------------------

  // ------------- 机器人默认头像--------------
  handleChangeB = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loadingA: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrlb =>
        this.setState({
          imageUrlb,
          loadingA: false,
          logoc: info.file.response.url,
        })
      );
    }
  };

  // -----------------窗口logo----------------
  handleChangeC = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loadingB: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.

      this.getBase64(info.file.originFileObj, imageUrlc =>
        this.setState(
          {
            imageUrlc,
            loadingB: false,
            logoa: info.file.response.url,
          },
          () => {}
        )
      );
    }
  };

  //  -------入口图标样式 电脑web端------------
  handleChangeD = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loadingC: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrld =>
        this.setState({
          imageUrld,
          loadingB: false,
          entranceWebStyle: info.file.response.url,
        },() => {
          console.log(info.file.response.url,imageUrld);
        })
      );
      // let img = info.file.response.url
      //
      // let a = { name:img, icon: '' }
      // let b = this.state.zxkfList
      // b.push(a)
    }
  };

  //  ----------入口图标样式 移动端H5----------------
  handleChangeE = info => {
    const { ydkfList } = this.state;

    ydkfList[4].icon = '';
    this.setState({ ydkfList });
    if (info.file.status === 'uploading') {
      this.setState({ loadingD: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrle =>
        this.setState({
          imageUrle,
          loadingD: false,
          entranceH5Style: info.file.response.url,
        })
      );
    }
  };

  //  --------------------热门问题-----------------
  handleAdditem = () => {
    this.setState(
      a => ({
        commonProblemList: [...a.commonProblemList, { name: '' }],
      }),
      () => {
        let a = this.state.commonProblemList;

        for (var i = 0; i < a.length - 1; i++) {
          a[i].name = 'tcx';
        }
        this.setState({ commonProblemList: a }, () => {
          const { input } = this.inputRef; // 如果是textArea的话，const { textAreaRef } = this.inputRef;
          input.focus();
          input.setSelectionRange(0, input.value.length);
        });
        // }
      }
    );
  };

  handleSubmitAs = e => {
    let a = this.state.commonProblemList;
    a.splice(e, 1);

    this.setState({ commonProblemList: a });
  };

  zjrmwt = (e, b) => {
    let a = this.state.commonProblemList;
    a[b].item = e.target.value;
    this.setState({ commonProblemList: a });
  };

  // -------------入口图标样式------------
  rktbonChange = e => {
    this.setState({
      valueC: e.target.value,
    });
  };

  djMapImg = index => {
    const a = this.state.zxkfList;

    // if(index!==5){
    if (a.length === 5) {
      a.pop();
      // this.setState(() => ({ zxkfList: a}))
    } else {
      // }else{
      this.setState({ disp: {} });
      if (a[index].name === undefined) {
      } else {
        this.setState({ entranceWebStyle: a[index].name });
        a.map((item, index) => {
          item.icon = '';
        });
        a[index].icon = '1';
        this.setState(() => ({ zxkfList: a, imageUrld: null }));

        if (index === 0) {
          this.setState(() => ({ index: 100 }));
        } else {
          this.setState(() => ({ index }));
        }
      }
    }
    // }
  };

  // djMapImg = (index) => {
  //
  //   const a = this.state.zxkfList
  //   this.setState({ entranceWebStyle: a[index].name })
  //   a.map((item, index) => { item.icon = '' })
  //   a[index].icon = '1'
  //   this.setState(() => ({ zxkfList: a, imageUrld: null }))
  //
  //   if (index === 0) {
  //     this.setState(() => ({ index: 100 }))
  //   } else {
  //     this.setState(() => ({ index, }))
  //   }
  // }

  // 上移
  handleSubmitAyd = index => {
    let arr = this.state.commonProblemList;
    this.upData(arr, index);
  };

  upData = (arr, index) => {
    var swapItems = function(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    };
    var newArr = [];
    if (arr.length > 1 && index !== 0) {
      newArr = swapItems(arr, index, index - 1);
    }

    if (newArr.length === 0) {
      message.info(`再上移就没了`);
    } else {
      this.setState({ commonProblemList: newArr });
    }
  };

  // ---------- 移动端图标样式-------------
  yddjMapImg = index => {
    this.setState({
      indextwo: null,
      imageUrle: null,
      disps: {},
      dispsa: { display: 'none' },
      aaa: false,
    });
    const a = this.state.ydkfList;
    this.setState({ entranceH5Style: a[index].name });
    a.map((item, index) => {
      item.icon = '';
    });
    a[index].icon = '1';
    this.setState(() => ({ ydkfList: a }));
    if (index === 0) {
      this.setState(() => ({ indextwo: 100 }));
    } else {
      this.setState(() => ({ indextwo: index }));
    }
  };

  qkimg = () => {
    this.setState({ index: null, imageUrld: null });
  };

  qkimgt = () => {
    this.setState({
      indextwo: null,
      imageUrle: null,
      disps: {},
      dispsa: { display: 'none' },
      aaa: false,
    });
  };

  baocun = () => {
    // let listrmtime = this.state.commonProblemList;
    // let listrmtimes = [];
    // listrmtime.map((item, index) => {
    //   if (item.item) {
    //     listrmtimes.push(item.item);
    //   }
    // });

    let feb = this.ueditor.getUeditorContent();
    const {
      webWinColor,
      valueC,
      winLogo,
      webUserHeadImg,
      sidebarMsg,
      id,
      contentId,
      headUrl
    } = this.state;
    let userInfo = this.props.form.getFieldsValue(); // 获取数据
    console.log(webUserHeadImg);
    this.props.form.validateFields((err, values) => {
      const { dispatch, robotId } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'accessSettings/fetche',
          payload: {
            id,
            robotId,
            winTitle: userInfo.winTitle,
            webWinColor: webWinColor,
            winLogo: winLogo,
            solveFlag: parseInt(userInfo.solveFlag),
            showFlag: parseInt(userInfo.showFlag),
            isSimilar: userInfo.isSimilar,
            userHeadImg: webUserHeadImg,
            winSize: parseInt(userInfo.winSize),
            rightMessage: feb,
            entranceFlag: valueC,
            entranceWebImg: this.state.entranceWebStyle ? this.state.entranceWebStyle : mrckjqr,
            entranceH5Img: this.state.entranceH5Style ? this.state.entranceH5Style : mrckzxkfd,
            entranceWebSeat: userInfo.mrckdxweb,
            entranceH5Seat: userInfo.mrckdxydd,
            iconBottomColor: this.state.colortwo,
            contentId,
            headPath:headUrl,
          },
          callback: res => {
            message.success(`${res.message}`);
            this.getInfo();
          },
        });
      });
    });
  };

  copyRobotId = () => {
    let text = document.getElementById('robotId');
    if (document.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToElementText(text);
      range.select();
    } else if (window.getSelection) {
      let selection = window.getSelection();
      let range = document.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
    }
    document.execCommand('Copy');
    message.success('复制成功！');
  };

  copySiteUrl = () => {
    let text = document.getElementById('site');
    if (document.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToElementText(text);
      range.select();
    } else if (window.getSelection) {
      let selection = window.getSelection();
      let range = document.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
    }
    document.execCommand('Copy');
    message.success('复制成功！');
  };

  bottomColor = e => {
    this.setState({ bottomStyle: Number(e.target.value) });
  };

  explain = () => {
    return window.open('http://www.chatbot.cn:3000/#/document/ddjr_wzjr');
  };

  /**
   * 复制代码
   */
  copy = type => {
    let text = '';

    switch (type) {
      case 'box1ToJs':
        text = document.getElementById('box1ToJs');
        break;
      case 'box2ToSite':
        text = document.getElementById('box2ToSite');
        break;
      case 'box3ToRobotId':
        text = document.getElementById('box3ToRobotId');
        break;
    }
    if (document.body.createTextRange) {
      var range = document.body.createTextRange();
      range.moveToElementText(text);
      range.select();
    } else if (window.getSelection) {
      let selection = window.getSelection();
      let range = document.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
    }
    document.execCommand('Copy');
    message.success('复制成功！');
  };

  /**
   * 打开/关闭窗口颜色选择
   */
  handleColorPick = () => {
    let { displayColorPicker } = this.state;
    this.setState({
      displayColorPicker:!displayColorPicker
    })
  }

  /**
   * 选择颜色
   */
  handleChangeColor = color => {
    this.setState({ webWinColor: color.hex });
  };

  /**
   * 上传图片的onChange事件
   */
  handleChangeImage = (info,type) => {
    if (info.file.status === 'uploading') {
      this.setState({ loadingImage: true });
      return;
    }
    if (info.file.status === 'done') {
      this.getBase64(info.file.originFileObj, imageInfo =>{
          switch (type) {
            case 'winLogo':
              this.setState(
                {
                  imageSourceToWinLogo:imageInfo,
                  loadingImage: false,
                  winLogo: info.file.response.url,
                })
              break;
            case 'webUserHeadImg':
              this.setState(
                {
                  imageSourceToWebUserHeadImg:imageInfo,
                  loadingImage: false,
                  webUserHeadImg: info.file.response.url,
                })
              break;
            case 'entranceWebImg':
              this.setState(
                {
                  imageUrld:imageInfo,
                  loadingImage: false,
                  entranceWebStyle: info.file.response.url,
                })
              break;
            case 'headPath':
              this.setState(
                {
                  headPath:imageInfo,
                  headUrl: info.file.response.url,
                })
              break;
          }

        }
      );
    }
  }

  openInformation = () => {
    window.open(informationUrl)
  }

  render() {
    const popover = {
      position: 'absolute',
      zIndex: '2',
    };
    const gbcolor = {
      background: this.state.color,
    };
    const gbcolortwo = {
      background: this.state.colortwo,
    };
    const cover = {
      position: 'fixed',
      top: '0px',
      right: '0px',
      bottom: '0px',
      left: '0px',
    };
    const body = '</body>';
    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        sm: 24,
        md: 5,
      },
      wrapperCol: {
        sm: 24,
        md: 16,
      },
    };
    // logo头像
    const uploadButtonb = (
      <img style={{ width: 51, height: 51, borderRadius: '50%' }} src={this.state.logoa} />
    );
    // 客服头像
    const uploadButton = (
      <img style={{ width: 51, height: 51, borderRadius: '50%' }} src={this.state.logob} />
    );
    // 机器人头像
    const uploadButtona = (
      <img style={{ width: 51, height: 51, borderRadius: '50%' }} src={this.state.logoc} />
    );
    const imageUrla = this.state.imageUrla;
    const imageUrlb = this.state.imageUrlb;
    const imageUrlc = this.state.imageUrlc;
    const imageUrld = this.state.imageUrld;
    const imageUrle = this.state.imageUrle;

    const {
      webWinColor,
      displayColorPicker,
      imageSourceToWinLogo,
      winLogo,
      imageSourceToWebUserHeadImg,
      webUserHeadImg,
      sidebarMsg,
      headPath
    } = this.state;
    const { robotId } = this.props;

    return (
      <div>
        {/* onClick={this.explain} */}
        <Spin spinning={this.state.loading}>
          <span className={styles.titlep}>
            <span>JS接入</span>
          </span>
          <div style={{ overflow: 'hidden' }}>
            <div style={{ width: '50%', float: 'left' }}>
              <p style={{ margin: '22px 0px 22px 28px' }}>
                请将以下代码添加到你网站的HTML源代码中，放在&lt;/body&gt;标签之前，即可实现JS弹窗方式接入
              </p>
              <div className={styles.textTitleDeV}>
                <div
                  className={styles.textTitle}
                  id="box1ToJs"
                >
                  {
                    `<script src="${customBaseUrl}/static/js/qzkf.config.js" data-robotId="${this.props.robotId}" id="qizhiChatScript"></script>`
                  }
                </div>
                <Button onClick={() => this.copy('box1ToJs')} size="small" className={styles.djBu}>
                  复制
                </Button>
              </div>
            </div>
          </div>
          <div style={{ height: 30 }}></div>
          <span className={styles.titlep}>
            <span>网址接入</span>
          </span>
          <p style={{ margin: '22px 0px 22px 28px' }}>
            请将以下咨询页面地址添加到您的网站或微信公众号菜单中，即可实现网址方式接入
          </p>
          <div className={styles.textTitleDeV}>
            <div className={styles.textTitle} id="box2ToSite">
              {customBaseUrl}/web?robotId={robotId}
            </div>
            <Button onClick={() => this.copy('box2ToSite')} size="small" className={styles.djBu}>
              复制
            </Button>
          </div>
          <div style={{ height: 30 }}></div>
          <span className={styles.titlep}>
            <span>机器人ID</span>
          </span>
          <div className={styles.textTitleDeV} style={{ marginTop: 22 }}>
            <div className={styles.textTitle} id="box3ToRobotId">
              {robotId}
            </div>
            <Button onClick={() => this.copy('box3ToRobotId')} size="small" className={styles.djBu}>
              复制
            </Button>
          </div>

          <div style={{ height: 30 }}></div>
          <span className={styles.titlep}>
            <span>网站接入设置</span>
          </span>
          <div style={{ height: 30 }}></div>
          <div>
            <Row className={styles.webSet}>
              <Col xl={12} lg={24}>
                <div style={{ borderRight: '1px solid #e6ecf6' }}>
                  <Form layout="horizontal" {...FormItemLayont}>
                    <Form.Item label="窗口标题" >
                      {getFieldDecorator('winTitle')(<Input style={{ width: 280 }} />)}
                    </Form.Item>
                    <Form.Item label="窗口颜色" >
                      {getFieldDecorator('webWinColor')(
                        <div className={styles.flexColor}>
                          <div
                            style={{ background:webWinColor }}
                            className={styles.colorzj}
                            onClick={this.handleColorPick}
                          />
                          <span>{webWinColor}</span>
                          {
                            displayColorPicker ? (
                              <div style={{position: 'absolute',zIndex: '2'}}>
                                <div style={{
                                  position: 'fixed',
                                  top: '0px',
                                  right: '0px',
                                  bottom: '0px',
                                  left: '0px'}} onClick={this.handleColorPick} />
                                <ChromePicker
                                  color={webWinColor}
                                  onChangeComplete={this.handleChangeColor}
                                />
                              </div>
                            ) : null
                          }
                        </div>
                      )}
                    </Form.Item>
                    <Form.Item className="Uploadlgq" label="窗口Logo" >
                      <Upload
                        name="file"
                        listType="picture"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/cloud/file/upload"
                        beforeUpload={this.beforeUpload}
                        onChange={(info) => this.handleChangeImage(info,'winLogo')}
                        accept=".png,.jpg"
                      >
                        <div className={styles.xzwj}>
                          {imageSourceToWinLogo ? (
                            <img
                              style={{ width: 51, height: 51, borderRadius: '50%' }}
                              src={imageSourceToWinLogo}
                              alt="file"
                            />
                          ) : (
                            <img
                              style={{ width: 51, height: 51, borderRadius: '50%' }}
                              src={winLogo}
                              alt="file"
                            />
                          )}
                          <Button style={{ marginLeft: 10 }} size="small">
                            选择文件
                          </Button>
                        </div>
                      </Upload>
                      <p style={{ fontSize: 10, color: '#99a8b7', marginBottom: 0 }}>
                        标题栏左侧Logo图，大小不超过1MB,推荐图片尺寸50*50
                      </p>
                    </Form.Item>
                    <Form.Item label="解决状态">
                      {getFieldDecorator('solveFlag',{
                        initialValue:'1'
                      })(
                        <Radio.Group>
                          <Radio value="1">开启</Radio>
                          <Radio value="2">关闭</Radio>
                        </Radio.Group>
                      )}
                    </Form.Item>
                    <Form.Item label="显示状态">
                      {getFieldDecorator('showFlag', {
                        initialValue: '1',
                      })(
                        <Radio.Group>
                          <Radio value="1">直接显示</Radio>
                          <Radio value="2">点击显示</Radio>
                        </Radio.Group>
                      )}
                    </Form.Item>
                    <Form.Item label="联想输入">
                      {getFieldDecorator('isSimilar', {
                        initialValue: '1',
                      })(
                        <Radio.Group>
                          <Radio value={true}>开启</Radio>
                          <Radio value={false}>关闭</Radio>
                        </Radio.Group>
                      )}
                    </Form.Item>
                    <FormItem label="机器人头像">
                      <Upload
                        name="file"
                        listType="picture"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/cloud/file/upload"
                        beforeUpload={this.beforeUpload}
                        onChange={(info) => this.handleChangeImage(info,'headPath')}
                        accept=".png,.jpg"
                      >
                        <div className={styles.xzwj}>
                          {headPath ? (
                            <img
                              style={{ width: 51, height: 51, borderRadius: '50%' }}
                              src={headPath}
                              alt="file"
                            />
                          ) : (
                            // uploadButtonb
                            ''
                          )}
                          <Button style={{ marginLeft: 10 }} size="small">
                            选择文件
                          </Button>
                        </div>
                      </Upload>
                      <p style={{ fontSize: 10, color: '#99a8b7', marginBottom: 0 }}>
                        机器人接待时显示的客服头像，大小不超过1MB，推荐图片尺寸50×50px
                      </p>
                    </FormItem>
                    <Form.Item className="Uploadlg" label="客户默认头像">
                      <Upload
                        name="file"
                        listType="picture"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/cloud/file/upload"
                        beforeUpload={this.beforeUpload}
                        onChange={(info) => this.handleChangeImage(info,'webUserHeadImg')}
                        accept=".png,.jpg"
                      >
                        <div className={styles.xzwj}>
                          {imageSourceToWebUserHeadImg ? (
                            <img
                              style={{ width: 51, height: 51, borderRadius: '50%' }}
                              src={imageSourceToWebUserHeadImg}
                              alt="avatar"
                            />
                          ) : (
                            <img
                              style={{ width: 51, height: 51, borderRadius: '50%' }}
                              src={webUserHeadImg}
                              alt="avatar"
                            />
                          )}
                          <Button style={{ marginLeft: 10 }} size="small">
                            选择文件
                          </Button>
                        </div>
                      </Upload>
                      <p style={{ fontSize: 10, color: '#99a8b7', marginBottom: 0 }}>
                        标题栏左侧Logo图，大小不超过1MB,推荐图片尺寸50*50
                      </p>
                    </Form.Item>
                    <Form.Item label="默认窗口大小" >
                      <div className={styles.mrcdx}>
                        <img src={mrckSizea} />
                        <img style={{ marginLeft: 20 }} src={mrckSizeb} />
                      </div>
                      {getFieldDecorator('winSize',{
                        initialValue: '1',
                      })(
                        <Radio.Group className={styles.mrcdx}>
                          <Radio style={{ marginLeft: 24, marginTop: 10 }} value="1">
                            大窗口
                          </Radio>
                          <Radio style={{ marginLeft: 35, marginTop: 10 }} value="2">
                            小窗口
                          </Radio>
                        </Radio.Group>
                      )}
                    </Form.Item>
                    <Form.Item className="antZdy" label="侧边栏信息展示">
                      <Editor
                        content={sidebarMsg}
                        name="content"
                        id="content"
                        width="300"
                        ref={r => (this.ueditor = r)}
                      />
                    </Form.Item>
                  </Form>
                </div>
              </Col>
              <Col xl={12} lg={24}>
                <div
                  style={{ display: 'flex', justifyContent: 'flex-start' }}
                  className={styles.webSetRaght}
                >
                  <div className={styles.Rightjqr}>
                    <div style={{ height: 10, width: '100%' }}></div>
                    <Row>
                      <Col md={4} sm={24}>
                        <Row>
                          <Col md={24} sm={5} xs={7}>
                            <p
                              style={{
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 0.85)',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              入口图标状态:
                            </p>
                          </Col>
                          <Col md={0} sm={18} xs={17}></Col>
                        </Row>
                      </Col>
                      {/* <Col md={4} sm={24}>
                      <p style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.85)', marginBottom: 0, textAlign: 'right' }}>入口图标样式</p>
                    </Col> */}
                      <Col md={20} sm={24}>
                        <div style={{ minHeight: 60, width: '100%', marginLeft: 6 }}>
                          <RadioGroup onChange={this.rktbonChange} value={this.state.valueC}>
                            <Radio value="1">显示</Radio>
                            <Radio value="2">隐藏</Radio>
                          </RadioGroup>
                        </div>
                      </Col>
                    </Row>

                    <Row>
                      <Col md={4} sm={24}>
                        <Row>
                          <Col md={24} sm={5} xs={7}>
                            <p
                              style={{
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 0.85)',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              入口图标样式:
                            </p>
                            <p
                              style={{
                                fontSize: 10,
                                color: '#99a8b7',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              电脑端web
                            </p>
                          </Col>
                          <Col md={0} sm={18} xs={17}></Col>
                        </Row>
                      </Col>

                      <Col md={20} sm={24}>
                        <div style={{ minHeight: 147, width: '100%', marginLeft: 14 }}>
                          <div className={styles.kzrkysz}>
                            {this.state.zxkfList.map((item, index) => {
                              return (
                                <Fragment key={index}>
                                  {/* style={{ width: 74, height: 74 }} */}
                                  {index === 4 ? (
                                    <div
                                      className={styles.kzrkys}
                                      onClick={() => this.djMapImg(index)}
                                    >
                                      <img style={{ width: 74, height: 74 }} src={item.name}></img>
                                    </div>
                                  ) : (
                                    <div
                                      className={styles.kzrkys}
                                      onClick={() => this.djMapImg(index)}
                                    >
                                      <img
                                        className={styles.imgMap}
                                        style={{ margin: '0px 22px 0px 22px' }}
                                        src={item.name}
                                      ></img>
                                    </div>
                                  )}

                                  {/* {item.icon === '1' && this.state.index ? <div className={styles.checkH}><Icon style={{ color: '#ffffff', fontSize: 4 }} type="check" /></div> : <div className={styles.checkHz}></div>} */}
                                  {item.icon === '1' && !imageUrld ? (
                                    <div className={styles.checkH}>
                                      <Icon
                                        style={{ color: '#ffffff', fontSize: 4 }}
                                        type="check"
                                      />
                                    </div>
                                  ) : (
                                    <div className={styles.checkHz}></div>
                                  )}
                                </Fragment>
                                // <img key={index} className={styles.imgMap} style={{ margin: '0px 22px 0px 22px' }} src={item.name} onClick={() => this.djMapImg(index)}></img>
                              );
                            })}
                            <div style={this.state.disp} className={styles.xzwjts}>
                              <Upload
                                name="file"
                                listType="picture"
                                className="avatar-uploader"
                                showUploadList={false}
                                action="/cloud/file/upload"
                                beforeUpload={this.beforeUpload}
                                onChange={this.handleChangeD}
                                accept=".png,.jpg"
                              >
                                <div onClick={this.qkimg}>
                                  {imageUrld == null ? (
                                    <Button size="small">选择文件</Button>
                                  ) : (
                                    <div className={styles.kzrkys}>
                                      <img
                                        style={{ width: 74, height: 74 }}
                                        src={imageUrld}
                                        alt="files"
                                      />
                                    </div>
                                  )}
                                  {imageUrld !== null ? (
                                    <div className={styles.checkHimg}>
                                      <Icon
                                        style={{ color: '#ffffff', fontSize: 4 }}
                                        type="check"
                                      />
                                    </div>
                                  ) : null}
                                </div>
                              </Upload>
                            </div>
                          </div>
                        </div>
                      </Col>
                    </Row>

                    <Row style={{ marginTop: 20 }}>
                      <Col md={4} sm={24}>
                        <Row>
                          <Col md={24} sm={5} xs={7}>
                            <p
                              style={{
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 0.85)',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              入口图标样式:
                            </p>
                            <p
                              style={{
                                fontSize: 10,
                                color: '#99a8b7',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              移动端H5
                            </p>
                          </Col>
                          <Col md={0} sm={18} xs={17}></Col>
                        </Row>
                      </Col>

                      <Col md={20} sm={24}>
                        <div style={{ minHeight: 200, width: '100%', marginLeft: 14 }}>
                          <div className={styles.kzrkysz}>
                            {this.state.ydkfList.map((item, index) => {
                              if (index == 4) {
                                return (
                                  <Fragment key={index}>
                                    <div
                                      style={this.state.dispsa}
                                      className={styles.kzrkys}
                                      onClick={this.qkimgt}
                                    >
                                      <img
                                        className={styles.imgMap}
                                        style={{ width: 74, height: 74 }}
                                        src={this.state.bbb}
                                      ></img>
                                    </div>
                                    {this.state.aaa ? (
                                      <div className={styles.checkHcfxm}>
                                        <Icon
                                          style={{ color: '#ffffff', fontSize: 4 }}
                                          type="check"
                                        />
                                      </div>
                                    ) : null}
                                    <div style={this.state.disps} className={styles.xzwjts}>
                                      <Upload
                                        name="file"
                                        listType="picture"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                        action="/cloud/file/upload"
                                        beforeUpload={this.beforeUpload}
                                        onChange={this.handleChangeE}
                                        accept=".png,.jpg"
                                      >
                                        <div onClick={this.qkimgt}>
                                          {imageUrle == null ? (
                                            <Button size="small">选择文件</Button>
                                          ) : (
                                            <div className={styles.kzrkys}>
                                              <img
                                                style={{ width: 74, height: 74 }}
                                                src={imageUrle}
                                                alt="filed"
                                              />
                                            </div>
                                          )}
                                          {imageUrle !== null ? (
                                            <div className={styles.checkHimg}>
                                              <Icon
                                                style={{ color: '#ffffff', fontSize: 4 }}
                                                type="check"
                                              />
                                            </div>
                                          ) : null}
                                        </div>
                                      </Upload>
                                    </div>
                                    <div
                                      className={styles.kzrkyscfx}
                                      onClick={() => this.yddjMapImg(index)}
                                    >
                                      <img
                                        className={styles.imgMap}
                                        style={{ margin: '0px 22px 0px 22px' }}
                                        src={item.name}
                                      ></img>
                                    </div>
                                    {item.icon === '1' ? (
                                      <div className={styles.checkHcfx}>
                                        <Icon
                                          style={{ color: '#ffffff', fontSize: 4 }}
                                          type="check"
                                        />
                                      </div>
                                    ) : null}
                                    {/* {this.state.aaa ? <div className={styles.checkHcfx}><Icon style={{ color: '#ffffff', fontSize: 4 }} type="check" /></div> : null} */}
                                  </Fragment>
                                );
                              }
                              return (
                                <Fragment key={index}>
                                  <div
                                    className={styles.kzrkys}
                                    onClick={() => this.yddjMapImg(index)}
                                  >
                                    <img
                                      className={styles.imgMap}
                                      style={{ margin: '0px 22px 0px 22px' }}
                                      src={item.name}
                                    ></img>
                                  </div>
                                  {item.icon === '1' && !imageUrle ? (
                                    <div className={styles.checkH}>
                                      <Icon
                                        style={{ color: '#ffffff', fontSize: 4 }}
                                        type="check"
                                      />
                                    </div>
                                  ) : (
                                    <div className={styles.checkHz}></div>
                                  )}
                                </Fragment>
                              );
                            })}
                          </div>
                        </div>
                      </Col>
                    </Row>

                    <Row style={{ marginTop: 40 }}>
                      <Col md={4} sm={24}>
                        <Row>
                          <Col md={24} sm={5} xs={7}>
                            <p
                              style={{
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 0.85)',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              入口图标位置:
                            </p>
                            <p
                              style={{
                                fontSize: 10,
                                color: '#99a8b7',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              电脑端web
                            </p>
                          </Col>
                          <Col md={0} sm={18} xs={17}></Col>
                        </Row>
                      </Col>
                      <Col md={20} sm={24}>
                        <div style={{ minHeight: 165, width: '100%', marginLeft: 14 }}>
                          <div className={styles.mrcdx}>
                            <img src={imgycd} />
                            <img style={{ marginLeft: 20 }} src={imgycz} />
                          </div>
                          {getFieldDecorator('mrckdxweb', {
                            initialValue: this.state.mrckdxweb,
                          })(
                            <RadioGroup className={styles.mrcdx}>
                              <Radio style={{ marginLeft: 24, marginTop: 10 }} value="1">
                                右下角
                              </Radio>
                              <Radio style={{ marginLeft: 35, marginTop: 10 }} value="2">
                                右侧中部
                              </Radio>
                            </RadioGroup>
                          )}
                        </div>
                      </Col>
                    </Row>

                    <Row>
                      <Col md={4} sm={24}>
                        <Row>
                          <Col md={24} sm={5} xs={7}>
                            <p
                              style={{
                                fontSize: 14,
                                color: 'rgba(0, 0, 0, 0.85)',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              入口图标位置:
                            </p>
                            <p
                              style={{
                                fontSize: 10,
                                color: '#99a8b7',
                                marginBottom: 0,
                                textAlign: 'right',
                              }}
                            >
                              移动端H5
                            </p>
                          </Col>
                          <Col md={0} sm={18} xs={17}></Col>
                        </Row>
                      </Col>
                      <Col md={20} sm={24}>
                        <div style={{ minHeight: 200, width: '100%', marginLeft: 14 }}>
                          <div className={styles.mrcdx}>
                            <img src={imgyddycd} />
                            <img style={{ marginLeft: 60 }} src={imgyddycz} />
                            <img style={{ marginLeft: 60 }} src={imgyddycx} />
                          </div>
                          {getFieldDecorator('mrckdxydd', {
                            initialValue: this.state.mrckdxydd,
                          })(
                            <RadioGroup onChange={this.bottomColor} className={styles.mrcdx}>
                              <Radio style={{ marginLeft: 8, marginTop: 10 }} value="1">
                                右下角
                              </Radio>
                              <Radio style={{ marginLeft: 35, marginTop: 10 }} value="2">
                                右侧中部
                              </Radio>
                              <Radio style={{ marginLeft: 35, marginTop: 10 }} value="3">
                                底部
                              </Radio>
                            </RadioGroup>
                          )}
                          {this.state.bottomStyle === 3 ? (
                            <div className={styles.buttonclass}>
                              <div>底部入口背景颜色</div>
                              <div>
                                {getFieldDecorator('ckcolortwo', {
                                  initialValue: this.state.colortwo,
                                })(
                                  <div className={styles.flexColor}>
                                    <div
                                      style={gbcolortwo}
                                      className={styles.colorzjtwo}
                                      onClick={this.handleClicktwo}
                                    />
                                    <span>{this.state.colortwo}</span>
                                    {this.state.displayColorPickertwo ? (
                                      <div style={popover}>
                                        <div style={cover} onClick={this.handleClosetwo} />
                                        <ChromePicker
                                          color={this.state.colortwo}
                                          onChangeComplete={this.handleChangeCompletetwo}
                                        />
                                      </div>
                                    ) : null}
                                  </div>
                                )}
                              </div>
                            </div>
                          ) : null}
                        </div>
                      </Col>
                    </Row>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
          <div className={styles.webSetBotton}></div>
          <div style={{ margin: '50px 0px 100px 100px' }}>
            <Button style={{ marginRight: 10 }}>取消</Button>
            <Button onClick={this.baocun} type="primary">
              保存
            </Button>
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(SiteAccess2));
